﻿@page "/DateRangePicker/Forms-Validation"

@using Syncfusion.Blazor.Calendars;
@using Syncfusion.Blazor.Buttons;
@using System.ComponentModel.DataAnnotations;
@using System.Reflection;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample is used to validate form using the Data Annotation. Type the date range in the input element or choose the date range from the calendar popup. If the input value is a valid date range value, then the given input will be ready to submit. Otherwise, an error message will be shown until you enter or choose the valid date.</p>
</SampleDescription>
<ActionDescription>
    <p>The form enables the validation with data annotation attributes by clicking on the submit externally. All rules are validated by the DataAnnotationsValidator.</p>
    <p>The above date range field is configured with the following rules.</p>
    <table style='width:100%'>
        <tr>
            <th>Field</th>
            <th>Rule</th>
        </tr>
        <tr>
            <td style="padding-right:20px">Required</td>
            <td>The field must have valid start and end date values.</td>
        </tr>
        <tr>
            <td>Range</td>
            <td>The field must have a date range value within the given range. The date should be between 5 March 2021 and 25 March 2021.</td>
        </tr>
    </table>
</ActionDescription>

<div class="control-section">
    <div id="wrapper">
        <div class="wrap">
            @if (string.IsNullOrEmpty(Message))
            {
                <EditForm Model="@annotation" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
                    <DataAnnotationsValidator />
                    <div class="form-group">
                        <SfDateRangePicker TValue="DateTime?" id='DateRangePick' Placeholder="Choose a Check-In and Check-Out Date" Min='@MinDate' Max='@MaxDate' @bind-StartDate="@annotation.StartDate" @bind-EndDate="@annotation.EndDate"></SfDateRangePicker>
                        <ValidationMessage For="@(() => annotation.StartDate)" />
                        <ValidationMessage For="@(() => annotation.EndDate)" />
                    </div>
                    <div class="sfButton">
                        <SfButton type="submit" IsPrimary="true">Submit</SfButton>
                    </div>
                </EditForm>
            }
            else
            {
                <div class="alert alert-success">
                    @Message
                </div>
            }
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }

    .sfButton {
        padding-top: 10px;
        display: flex;
        justify-content: center;
    }

    .validation-message {
        color: red;
        padding-top: 5px;
    }
</style>

@code {
    private string Message = string.Empty;
    async void OnValidSubmit()
    {
        Message = "Form Submitted Successfully!";
        await Task.Delay(2000);
        Message = string.Empty;
        annotation.StartDate = null;
        annotation.EndDate = null;
        StateHasChanged();
    }
    private void OnInvalidSubmit()
    {
        Message = string.Empty;
    }
    private DateTime MinDate { get; set; } = new DateTime(2021, 3, 1);
    private DateTime MaxDate { get; set; } = new DateTime(2021, 3, 31);
    public class HandleCustomValidation : ValidationAttribute
    {
        protected override ValidationResult IsValid(object value,
            ValidationContext validationContext)
        {
            var endDate = (DateTime?)validationContext.ObjectInstance.GetType().GetProperty("EndDate").GetValue(validationContext.ObjectInstance);
            var startDate = (DateTime?)validationContext.ObjectInstance.GetType().GetProperty("StartDate").GetValue(validationContext.ObjectInstance);
            return startDate < endDate ? null : new ValidationResult("The Start Date should be before the End Date.", new[] { validationContext.MemberName });
        }
    }
    private Annotation annotation = new Annotation();
    public class Annotation
    {
        [Required(ErrorMessage = "The Start Date field is required.")]
        [Range(typeof(DateTime), "3/5/2021", "3/25/2021", ParseLimitsInInvariantCulture = true, ErrorMessage = "The start date should not be beyond 5 March 2021.")]
        public DateTime? StartDate { get; set; } = null;
        [Required(ErrorMessage = "The End Date field is required.")]
        [Range(typeof(DateTime), "3/5/2021", "3/25/2021", ParseLimitsInInvariantCulture = true, ErrorMessage = "The end date should not be above 25 March 2021.")]
        [HandleCustomValidation]
        public DateTime? EndDate { get; set; } = null;
    }
}